<template>
	<view class="content">
			<view class="whead">
				<view class="left">
					<image src="../../static/img/back2.png" mode=""></image>
				</view>
				<view class="center">
					<view class="searchBox">
						<view class="inp">
							<input type="text" value="" placeholder="搜索你想要的产品" />
						</view>
						<view class="r">
							<image src="../../static/img/sou.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="right">
					筛选
				</view>
			</view>
            <view class='list'>
				<view class="inbox box_margin">
					<view class="top">
					  <view class="left">
						<view class="tp">
						<image src="../../static/img/dh.png"></image>
						</view>
						<view class="text">
						  <text class="text">联系卖家</text>
						</view> 
					  </view>     
					  <view class="right">
						<view class="pz">
						  <text class="pz">联想轻薄笔记本ideapad330-15i3-6006/4G/128G 联想轻薄笔记本ideapad330-15i3-6006/4G/128G</text>
						</view>
						<view class="place">
						  <view class="wz">
							<text class="wz1">郑州惠达联想郑州惠达联想郑州惠达联想郑州惠达联想</text>
						  </view>
						  <view class="icon">
							<image src="../../static/img/right_jt.png"></image>
						  </view>
						  <view class="price">
							<text class="price">今日报价 ¥ 2590</text>
						  </view>
						</view>
					  </view>
					</view>
					<view class="bottom">
					  <text class=" bottom_box">查看商品详情及全部商家报价</text>
					</view>
				</view>
				<view class="inbox box_margin">
					<view class="top">
					  <view class="left">
						<view class="tp">
						<image src="../../static/img/dh.png"></image>
						</view>
						<view class="text">
						  <text class="text">联系卖家</text>
						</view>
					  </view>     
					  <view class="right">
						<view class="pz">
						  <text class="pz">联想轻薄笔记本ideapad330-15i3-6006/4G/128G 联想轻薄笔记本ideapad330-15i3-6006/4G/128G</text>
						</view>
						<view class="place">
						  <view class="wz">
							<text class="wz1">郑州惠达联想郑州惠达联想郑州惠达联想郑州惠达联想</text>
						  </view>
						  <view class="icon">
							<image src="../../static/img/right_jt.png"></image>
						  </view>
						  <view class="price">
							<text class="price">今日报价 ¥ 2590</text>
						  </view>
						</view>
					  </view>
					</view>
					<view class="bottom">
					  <text class=" bottom_box">查看商品详情及全部商家报价</text>
					</view>
				</view>
				<view class="inbox box_margin">
					<view class="top">
					  <view class="left">
						<view class="tp">
						<image src="../../static/img/dh.png"></image>
						</view>
						<view class="text">
						  <text class="text">联系卖家</text>
						</view>
					  </view>     
					  <view class="right">
						<view class="pz">
						  <text class="pz">联想轻薄笔记本ideapad330-15i3-6006/4G/128G 联想轻薄笔记本ideapad330-15i3-6006/4G/128G</text>
						</view>
						<view class="place">
						  <view class="wz">
							<text class="wz1">郑州惠达联想郑州惠达联想郑州惠达联想郑州惠达联想</text>
						  </view>
						  <view class="icon">
							<image src="../../static/img/right_jt.png"></image>
						  </view>
						  <view class="price">
							<text class="price">今日报价 ¥ 2590</text>
						  </view>
						</view>
					  </view>
					</view>
					<view class="bottom">
					  <text class=" bottom_box">查看商品详情及全部商家报价</text>
					</view>
				</view>
				<view class="inbox">
					<view class="top">
					  <view class="left">
						<view class="tp">
							<image src="../../static/img/dh.png"></image>
						</view>
						
						<view class="text">
							<text class="text" >联系卖家</text>
						</view> 
					  </view>     
					  <view class="right">
						<view class="pz">
						  <text class="pz">联想轻薄笔记本ideapad330-15i3-6006/4G/128G 联想轻薄笔记本ideapad330-15i3-6006/4G/128G</text>
						</view>
						<view class="place">
							<view class="wz">
								郑州惠达联想郑州惠达联想郑州惠达联想郑州惠达联想
							</view>
							<view class="icon">
								<image src="../../static/img/right_jt.png"></image>
							</view>
							<view class="price">
							   今日报价 ¥ 2590
							</view>
						</view>
					  </view>
					</view>
					<view class="bottom">
					  <text class=" bottom_box">查看商品详情及全部商家报价</text>
					</view>
				</view>
			</view>			
			
		<view class="shaiXuanLayer">
			<view class="mask">
				
			</view>
			<view class="layer">
				<view class="tit">
					分类:
				</view>
				<view class="classObox">
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
				</view>
				<view class="tit">
					品牌:
				</view>
				<view class="classObox">
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
					<view class="tip">手机分类</view>
				</view>
				<view class="tit">
					价格区间:
				</view>
				<view class="classObox">
					<view class="tip2">
						<input type="text" value="" />
					</view>
					<view class="z">
						--
					</view>
					<view class="tip2">
						<input type="text" value="" />
					</view>
				</view>
				<view class="btnBox">
					<button type="primary" class="btn">完成</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import "../../static/css/main.css"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	.content {
		text-align: center;
		height: 100%;
		background: #eee;
	}
    .list {
  display: flex;
  flex-direction: column;
  background: #eeeeee;
  padding: 28rpx 18rpx 0rpx 18rpx;
}

.list .inbox {
  height: 280rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding-top: 36rpx;
  padding-bottom: 29rpx;
}

.list .inbox .top {
  display: flex;
  flex-direction: row;
}

.list .inbox .top .left {
  padding-right: 20rpx;
}

.list .inbox .top .left .tp  {
  padding-top: 21rpx;
  padding-left: 15rpx;
}

.list .inbox .top .left .tp image{
  width: 109rpx;
  height: 90rpx;
}

.list .inbox .top .left .text .text {
  font-size: 22rpx;
  color: #666666;
  letter-spacing: 1rpx;
  padding-left: 24rpx;
  line-height: 1em;
  padding-top: 15rpx;
  padding-bottom: 22rpx;
  display:block;
}

.list .inbox .top .right .pz .pz {
  font-size: 28rpx;
  color: #666666;
  width: 573rpx;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
  line-height: 50rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  
}

.list .inbox .top .right .place {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 26rpx;
}

.list .inbox .top .right .place .wz{
  font-size: 28rpx;
  color: #666666;
  line-height: 1em;
  padding-right: 20rpx;
  letter-spacing: 1rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170rpx;
  height: 30rpx;
  display:block;
}

.list .inbox .top .right .place .icon {
  margin-top: 0rpx;
}

.list .inbox .top .right .place .icon image {
  width: 26rpx;
  height: 27rpx;
}

.list .inbox .top .right .place .price {
  font-size: 28rpx;
  color: #666666;
  line-height: 1em;
  padding-left: 70rpx;
}

.list .inbox .bottom {
  padding-left: 19rpx;
}

.list .inbox .bottom .bottom_box {
  width: 680rpx;
  height: 44rpx;
  border-radius: 10rpx;
  background: #d2000f;
  font-size: 22rpx;
  color: #ffffff;
  text-align: center;
  line-height: 44rpx;
  display:block;
}

.list .box_margin {
  margin-bottom: 20rpx;
}

.shaiXuanLayer{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1111;
	.mask{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6);}
	.layer{position: fixed; right: 0; top: 0; width: 86%; height: 100%; background: #eee; padding: 30rpx;
		.tit{clear: both; width: 100%; height: auto; line-height: 40rpx; font-size: 34rpx; color:#666; text-align: left; padding: 40rpx 0 20rpx 10rpx;}
		.classObox{clear: both; width: 100%; overflow: hidden; height:auto;
			.tip{margin: 10rpx; padding:15rpx; color:#fff; font-size: 24rpx; background: #aaa; float:left}
			.tip2{margin: 10rpx; padding:15rpx; color:#333; font-size: 24rpx; border:1px solid #aaa; float:left; width: 200rpx;}
			.z{margin: 10rpx; padding:15rpx; color:#666; font-size: 24rpx; float:left; }
		}
		.btnBox{position: absolute; width: 80%; height: auto; left:10%; bottom: 20rpx;
			.btn{width: 100%; height: 60rpx; line-height: 60rpx; background: #B81D24; color:#fff; font-size: 42rpx; text-align: center;}
		}
	}
}
</style>
